<template>
  <div class="about">
    <div class="handle_container">
      <a-input placeholder="请输入用户名" v-model="username" />
      <a-button icon="search" @click="onClick">搜索</a-button>
      <a-button icon="search" @click="onkUnSet">重置</a-button>
    </div>
    <a-table
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="users"
      bordered
      :pagination="pagination"
    >
      <template slot="action" slot-scope="text,record">
        <a-button type="danger" shape="circle" icon="delete" @click="onClickDelete(record)" />
      </template>
    </a-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      users: [],
      dataSource: [],
      username: "",
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "roleName",
          dataIndex: "role_name",
          key: "role_name",
        },
        {
          title: "名字",
          dataIndex: "username",
          key: "username",
        },
        {
          title: "创建时间",
          dataIndex: "dateStr",
          key: "dateStr",
        },
        {
          title: "手机号码",
          dataIndex: "mobile",
          key: "mobile",
        },
        {
          title: "邮箱",
          dataIndex: "email",
          key: "email",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
        },
        {
          title: "操作",
          dataIndex: "",
          key: "",
        },
      ],
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(
            `selectedRowKeys: ${selectedRowKeys}`,
            "selectedRows: ",
            selectedRows
          );
        },
        onSelect: (record, selected, selectedRows) => {
          console.log(record, selected, selectedRows);
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          console.log(selected, selectedRows, changeRows);
        },
      },
      pagination: {
        defaultPageSize: 7,
        total: 0,
      },
    };
  },
  methods: {
    onClick() {
      if (this.username.length === 0) {
        return;
      }

      this.users = [];
      this.dataSource.forEach((element) => {
        if (element.username === this.username) {
          this.users.push(element);
        }
      });
      this.pagination.total = this.users.length;
    },

    onkUnSet() {
      this.users = [...this.dataSource];
      this.pagination.total = this.users.length;
    },
    onClickDelete(props) {
      console.log(props);
      var index = this.users.findIndex((element) => {
        return element.uid === props.uid;
      });

      if (index != -1) {
        this.users.splice(index, 1);
      }

      var index1 = this.userList.findIndex((element) => {
        return element.uid === props.uid;
      });

      if (index1 != -1) {
        this.userList.splice(index1, 1);
      }
    },
  },
  mounted() {
    axios
      .get("http://localhost:8080/userlist.json")
      .then((res) => {
        console.log(res);

        this.users = res.data.data.users;

        this.users.forEach((element) => {
          var date = new Date(element.create_time * 1000);
          var dateStr = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}秒`;
          element.dateStr = dateStr;
        });
        this.dataSource = [...this.users];
        this.pagination.total = this.users.length;
        console.log(this.pagination.total);
      })
      .catch(() => {});
  },
};
</script>

<style scoped>
.handle_container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
</style>